<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>防抖</title>
  </head>
  <body>
    <input type="text" />
    <script>
      /*
       * 参考视频：https://www.bilibili.com/video/BV1ig411u7LG/?spm_id_from=333.788.recommend_more_video.0
       *
       * 防抖与节流
       * 1. 函数防抖（debounce）
       *    通过setTimeout的方式，在一定的时间间隔内，将多次触发变为一次触发；
       * 2.应用场景
       *   - 防止表单多次提交
       *   - 搜索框实时获取数据：防止ajax请求次数
       */

      //防抖： 用户触发事件过于频繁，只要最后一次事件的操作
      let input = document.querySelector("input");
      //用户操作太过于频繁，利用防抖解决
      // input.oninput = function () {
      //   console.log(this.value);
      // };
      input.oninput = debounce(function () {
        //业务逻辑
        console.log(this.value);
      }, 500);

      /*
       * 利用闭包封装防抖函数
       * fn：函数
       * delay：延迟的时间，单位毫秒
       */
      function debounce(fn, delay) {
        let t = null;
        return function () {
          if (t !== null) clearTimeout(t);
          t = setTimeout(() => {
            fn.call(this);
          }, delay);
        };
      }
    </script>
  </body>
</html>
